@import '../../common/stylus/mixin'
.shopcart 
    position: fixed
    left: 0
    bottom: 0
    z-index: 50
    width: 100%
    height: 48px
    background-color: #ccc
    .content
        display: flex 
        background: #141d27
        .content-left
            flex: 1
            font-size: 0
            .logo-wrapper
                display:  inline-block
                position: relative
                top: -10px
                margin: 0 12px
                padding: 6px
                width: 56px
                height: 56px
                box-sizing: border-box
                vertical-align:top
                border-radius: 50%
                background-color: #141d27
                .logo
                    width: 100%
                    height: 100%
                    text-align: center
                    border-radius: 50%
                    background-color: #2b343c
                    &.highlight
                        background-color: rgb(0, 160, 220)
                    .icon-gouwuche
                        font-size: 24px
                        line-height: 44px
                        color: #80858a
                        &.highlight
                            color:rgb(255, 255, 255)
                .num
                    position: absolute
                    top: 0
                    right: 0
                    width: 24px
                    height: 16px
                    line-height: 16px
                    text-align: center
                    border-radius:16px
                    color: rgb(255,255,255)
                    font-size: 9px
                    font-weight: 700
                    background-color: rgb(240, 20, 20)
                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4)
            .price
                display: inline-block
                vertical-align: top
                margin-top: 12px
                padding-right: 12px
                line-height: 24px
                border-right: 1px solid rgba(255, 255, 255, 0.1)
                font-size: 16px
                box-sizing: border-box
                color: rgba(255,255,255,0.4)
                font-weight: 700
                &.highlight
                    color:#fff
            .desc
                display: inline-block
                vertical-align: top
                margin: 12px 0 0 12px
                font-size: 10px
                font-weight: 700
                line-height: 24px
                color: rgba(255,255,255,0.4)
        .content-right
            flex:0 0 105px
            width: 105px
            .pay
                height: 48px
                line-height: 48px
                text-align: center
                font-size: 12px
                font-weight: 700
                color:rgba(255, 255, 255, 0.4)
                background-color:#2b333b
                &.not-enough
                    background-color: #2b333b
                &.enough
                    background #00b43c
                    color #ffffff
    // 小球最终下落位置用fixed固定
    .ball-content
        .ball
            position: fixed
            bottom:22px
            left: 32px
            z-index: 200
            transition: all 0.5s cubic-bezier(0.49, -0.29, 0.75, 0.41)
            // &.drop-enter-active, &.drop-leave-active {
            //    transition: all 0.4s linear
            //   }
            // &.drop-enter, &.drop-leave-active {
            //     opacity: 0
            //     transform translate3d(24px, 0, 0)
            //   }
        .inner
            width: 16px
            height: 16px
            border-radius: 50%
            background-color: rgb(0, 160, 220)
            transition: all 0.5s linear
    .shopcart-list
        position: absolute
        left: 0
        top:0
        z-index: -1
        width: 100%
        transform: translate3d(0, -100%, 0)
        &.fade-enter-active, &fade-leave-active
            transition: all 0.5s
            transform: translate3d(0, -100%, 0)
        &.fade-enter, &.fade-leave-active
            transform:translate3d(0, 0, 0)
        .list-header
            height: 40px
            line-height: 40px
            padding: 0 18px
            background-color: #f3f5f7
            border-bottom:1px solid rgba(7,17,27,0.1)
            .title 
                float: left
                font-szie: 14px
                color: rgb(7, 17, 27)
            .empty
                float: right 
                font-size: 12px
                color: rgb(0, 160, 220)
        .list-content
            padding: 0 18px
            max-height: 217px       //设置最大高度，超出部分隐藏
            overflow: hidden
            background-color: #fff
            .food 
                position:relative
                padding: 12px 0
                border-1px(rgba(7, 17, 27, 0.1))
                box-sizing: border-box
                .name 
                    font-size: 14px
                    color: rgb(7, 17, 27)
                    line-height: 24px
                .price
                    position: absolute
                    bottom: 12px
                    right: 90px
                    font-size: 14px
                    font-weight: 700
                    color:rgb(240, 20, 20)
                    line-height: 24px
                .cartcontrol-wrapper
                    position: absolute
                    right: 0
                    bottom: 6px
.list-mast
    position: fixed
    left: 0
    top: 0
    width: 100%
    height: 100%
    z-index: -10
    -webkit-backdrop-filter: blur(10px)
    backdrop-filter:blur(10px)
    opacity: 1
    background-color: rgba(7, 17, 27, 0.6)
    &.fade-enter-active, &.fade-leave-active
        background-color: rgba(7, 17, 27, 0.6)
        opacity: 1
        transition: all 0.5s
    &.fade-enter, &.fade-leave-active
        background-color: rgba(7, 17, 27, 0)
        opacity: 0
        
